<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>产品列表页</title>
	<link rel="icon" href="img/favicon.ico">
	<link rel="stylesheet" type="text/css" href="css/base.css" />
	<link rel="stylesheet" type="text/css" href="css/list.css" />
</head>

<body>
<div id="app">
	<!--页面顶部-->
	<div id="nav-bottom" style="background: white;">
		<!--顶部-->
		<div class="nav-top">
			<div class="top">
				<div class="py-container" >
					<div class="shortcut">
						<ul class="fl">
							<li class="f-item">您好！</li>
							<li class="f-item">  请<a href="login.html" target="_blank" style="padding-left: 10px;">登录</a>　<span><a href="register.html" target="_blank">免费注册</a></span></li>
						</ul>
						<ul class="fr">
							<li class="f-item">我的订单</li>
							<li class="f-item space"></li>
							<li class="f-item">我的FM</li>
							<li class="f-item space"></li>
							<li class="f-item">FM会员</li>
							<li class="f-item space"></li>
							<li class="f-item">企业采购</li>
							<li class="f-item space"></li>
							<li class="f-item">客户服务</li>
							<li class="f-item space"></li>
							<li class="f-item">客户服务</li>
							<li class="f-item space"></li>
							<li class="f-item">网站导航</li>
						</ul>
					</div>
				</div>
			</div>
			<!--头部-->
			<div class="header">
				<div class="py-container" style="background: white;">
					<div class="yui3-g Logo">
						<div class="yui3-u Left logoArea" style="padding-top: 20px;">
							<img src="img/logo.png" width="60" height="60" alt="" style="float:left; margin-right: 10px;">
							<div style="font-size: 28px; color: #2b2b2b; margin-top: 18px;">FM商城</div>
						</div>
						<div class="yui3-u Center searchArea">
							<div class="search">
								<form action="" class="sui-form form-inline">
									<div class="input-append">
										<input type="text" id="autocomplete" v-model="requestParam.keywords" type="text" class="input-error input-xxlarge" />
										<a class="sui-btn btn-xlarge btn-danger" @click="skip">搜索</a>
									</div>
								</form>
							</div>
							<div class="hotwords">
								<ul>
									<li class="f-item">运动清凉节</li>
									<li class="f-item">数码家电</li>
									<li class="f-item">每100-50</li>
									<li class="f-item">家具直降</li>
									<li class="f-item">AMD新品</li>
									<li class="f-item">海尔巅峰</li>
									<li class="f-item">清凉家装</li>
								</ul>
							</div>
						</div>
						<img src="img/gifgoods.gif" alt="" style="display: inline; position: absolute;right: 340px; top: 50px;">
					</div>
					<div class="yui3-g NavList" style="background: white;">
						<div class="yui3-u Left all-sort">
							<h4>全部商品分类</h4>
						</div>
						<div class="yui3-u Center navArea">
							<ul class="nav">
								<li class="f-item">限时抢购</li>
								<li class="f-item">优惠券</li>
								<li class="f-item">PLUS会员</li>
								<li class="f-item">闪购</li>
								<li class="f-item">拍卖</li>
								<li class="f-item">海囤全球</li>
								<li class="f-item">FM生鲜</li>
							</ul>
						</div>
						<div class="yui3-u Right" style="background: white;"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--列表-->
	<div class="main">
		<div class="py-container">
			<!--面包屑-->
			<div class="bread">
				<ul class="fl sui-breadcrumb">
					<li>
						<a href="#">全部结果</a>
					</li>
					<li class="active" @click="removeCategory">{{ clickParam.category }}</li>
					<li class="active" @click="removeBrand">{{ clickParam.brand }}</li>
					<li class="active" @click="removePrice">{{ clickParam.price }}</li>
				</ul>
				<ul class="tags-choose" v-for="(value, key) in clickParam.spec" :key="key">
					<li class="tag">{{ value }}<i class="sui-icon icon-tb-close" @click="removeSpec(key)"></i></li>
				</ul>
				<form class="fl sui-form form-dark">
					<div class="input-control control-right">
						<input type="text" />
						<i class="sui-icon icon-touch-magnifier"></i>
					</div>
				</form>
				<div class="clearfix"></div>
			</div>
			<!--规格-->
			<div class="clearfix selector">
				<div class="type-wrap" v-show="!clickParam.category">
					<div class="fl key">商品分类</div>
					<div class="fl value">
						<a style="margin-right: 10px" href="#" @click="addCategory(item)" v-for="item in resultMap.categoryList" :key="item">{{ item }}</a>
					</div>
					<div class="fl ext"></div>
				</div>
				<div class="type-wrap" v-show="!clickParam.brand">
					<div class="fl key">品牌</div>
					<div class="fl value">
						<ul class="type-list">
							<li @click="addBrand(item.name)" v-for="(item, index) in resultMap.brandList" :key="item.id"><a href="#">{{ item.name }}</a></li>
						</ul>
					</div>

				</div>
				<div class="type-wrap" v-show="check(item.specName)" v-for="item in resultMap.specList" :key="item.id">
					<div class="fl key">{{ item.specName }}：</div>
					<div class="fl value">
						<ul class="type-list">
							<li @click="addSpec(item.specName, item1.optionName)" v-for="item1 in item.specificationOptions" :key="item1.id">
								<a href="#">{{ item1.optionName }}</a>
							</li>
						</ul>
					</div>
					<div class="fl ext"></div>
				</div>
				<div class="type-wrap" v-show="!clickParam.price">
					<div class="fl key">价格</div>
					<div class="fl value">
						<ul class="type-list">
							<li @click="addPrice(index)"  v-for="(item, index) in price" :key="item"><a href="#">{{ item }}</a></li>
						</ul>
					</div>
				</div>
			</div>
			<!--商品列表 -->
			<div class="details">
				<!--列表头部-->
				<div class="sui-navbar">
					<div class="navbar-inner filter">
						<ul class="sui-nav">
							<li class="active">
								<a href="#">综合</a>
							</li>
							<li>
								<a href="#">销量</a>
							</li>
							<li>
								<a href="#">新品</a>
							</li>
							<li>
								<a href="#">评价</a>
							</li>
							<li>
								<a href="#">价格</a>
							</li>
						</ul>
					</div>
				</div>
				<!--列表内容-->
				<div class="goods-list">
					<ul class="yui3-g">
						<li @click="skipItem(item.goodsId)" v-for="(item, index) in resultMap.rows" class="yui3-u-1-5">
							<div class="list-wrap">
								<div class="p-img">
									<a target="_blank"><img :src="item.image" /></a>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>{{ item.price }}</i>
									</strong>
								</div>
								<div class="attr">
									<em v-html="item.title">一加 OnePlus 7 骁龙855旗舰性能</em>
								</div>
								<div class="cu">
									<em>超清双摄 8GB+256GB</em>
								</div>
								<div class="commit">
									<strong>
										<a >6.8万+</a>条评价
									</strong>
								</div>
								<div class="operate">
									<i class="goods-icons J-picon-tips J-picon-fix" data-idx="1" >自营</i>
									<i class="goods-icons J-picon-tips J-picon-fix" data-idx="1" >本地仓</i>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<!--分页-->
				<div class="fr page">
					<div class="sui-pagination pagination-large">
						<ul>
							<li :class="{'prev': true, 'disabled': !hasPre()}">
								<a @click="skipPage('prev')">«上一页</a>
							</li>
							<li class="dotted" v-show="pageHandler.leftDot"><span>...</span></li>
							<li :class="{'active': requestParam.page === item}" v-for="item in pageHandler.pageList" :key="item">
								<a href="#" @click.prevent.stop="findByPage(item)">{{ item }}</a>
							</li>
							<li class="dotted" v-show="pageHandler.rightDot"><span>...</span></li>
							<li :class="{'next': true, 'disabled': !hasNext()}">
								<a @click="skipPage('next')">下一页»</a>
							</li>
						</ul>
						<div>
							<span>共{{ resultMap.totalPage }}页&nbsp;</span><span>
					到第<input type="text" ref="input" :value="requestParam.page" class="page_input">页
					<button class="page-confirm page_button" @click="confirmPage">确定</button>
					</span>
						</div>
					</div>
				</div>
			</div>
			<!--热卖-->
			<div class="clearfix hot-sale">
				<div class="mt"><strong class="mt-title">商品精选</strong></div>
				<div class="mc">
					<ul data-type="48" class="goods-chosen-list clearfix">
						<li>
							<img data-lazy-advertisement="done" src="//misc.360buyimg.com/lib/img/e/blank.gif" class="err-poster" style="display: none;" />
							<div class="p-client-click" data-clickurl="https://item.jd.com/100005702210.html" >
								<div class="p-img">
									<img width="190" height="190" src="//img10.360buyimg.com/n1/s190x190_jfs/t1/79476/17/2549/230068/5d0cb75bE02f96ee6/29d3b42032088f0b.jpg" class="err-product" />
								</div>
								<div class="p-name">
									<em>OPPO K3 高通骁龙710 升降摄像头 VOOC闪充 8GB+128GB 秘境黑 全网通4G 全面屏拍照游戏智能<font class="skcolor_ljg">手机</font></em>
								</div>
							</div>
							<div class="p-price">
								<strong class="price">￥<span class="J-prom-p-100005702210">1899.00</span></strong>
							</div>
							<div class="p-review">
								<span class="number J-p-comm-ss-100005702210">4.3万+</span>人评价
							</div> </li>
						<li> <img data-lazy-advertisement="done" src="//misc.360buyimg.com/lib/img/e/blank.gif" class="err-poster" style="display: none;" />
							<div class="p-client-click" >
								<div class="p-img">
									<img width="190" height="190" src="//img14.360buyimg.com/n1/s190x190_jfs/t1/76114/3/924/177227/5cf22fa5Ee0494589/cfcb7f6f97ac3f6b.jpg" class="err-product" />
								</div>
								<div class="p-name">
									<em>酷派 cool 9 珍珠全面屏 4GB+64GB 人脸指纹双识别 私密双系统 8层镀陶 极光色 移动联通电信4G<font class="skcolor_ljg">手机</font> 双卡双待</em>
								</div>
							</div>
							<div class="p-price">
								<strong class="price">￥<span class="J-prom-p-100003603159">599.00</span></strong>
							</div>
							<div class="p-review">
								<span class="number J-p-comm-ss-100003603159">1400+</span>人评价
							</div> </li>
						<li > <img data-lazy-advertisement="done" src="//misc.360buyimg.com/lib/img/e/blank.gif" class="err-poster" style="display: none;" />
							<div class="p-client-click" data-clickurl="https://item.jd.com/48002254618.html" >
								<div class="p-img">
									<img width="190" height="190" src="//img13.360buyimg.com/n1/s190x190_jfs/t28012/78/1386142971/135851/b1ed4be4/5cdf8922Ned2c5ac4.jpg" class="err-product" />
								</div>
								<div class="p-name">
									<em>【双镜面】网红迷你小<font class="skcolor_ljg">手机</font> 移动联通版 时尚备用</em>
								</div>
							</div>
							<div class="p-price">
								<strong class="price">￥<span class="J-prom-p-48002254618">198.00</span></strong>
							</div>
							<div class="p-review">
								<span class="number J-p-comm-ss-48002254618">10+</span>人评价
							</div> </li>
						<li > <img data-lazy-advertisement="done" src="//misc.360buyimg.com/lib/img/e/blank.gif" class="err-poster" style="display: none;" />
							<div class="p-client-click" data-clickurl="https://item.jd.com/48925747081.html" >
								<div class="p-img">
									<img width="190" height="190" src="//img11.360buyimg.com/n1/s190x190_jfs/t1/56300/8/1582/93429/5cf618e0Ef6156283/d68a25782a890ddd.jpg" class="err-product" />
								</div>
								<div class="p-name">
									<em>优购（UooGou） T10 5.0英寸移动4G 2+16G内存 智能<font class="skcolor_ljg">手机</font> 老年机 香槟金</em>
								</div>
							</div>
							<div class="p-price">
								<strong class="price">￥<span class="J-prom-p-48925747081">258.00</span></strong>
							</div>
							<div class="p-review">
								<span class="number J-p-comm-ss-48925747081">20+</span>人评价
							</div> </li>
						<li > <img data-lazy-advertisement="done" src="//misc.360buyimg.com/lib/img/e/blank.gif" class="err-poster" style="display: none;" />
							<div class="p-client-click" data-clickurl="https://item.jd.com/100005945610.html" >
								<div class="p-img">
									<img width="190" height="190" src="//img10.360buyimg.com/n1/s190x190_jfs/t1/77241/13/696/153697/5cee1c4dEd83c97ba/184671c54b16f277.jpg" class="err-product" />
								</div>
								<div class="p-name">
									<em>OPPO Reno Z 4800万超清像素 超清夜景2.0 VOOC闪充 8GB+128GB 极夜黑 全网通4G 全面屏拍照智能游戏<font class="skcolor_ljg">手机</font></em>
								</div>
							</div>
							<div class="p-price">
								<strong class="price">￥<span class="J-prom-p-100005945610">2299.00</span></strong>
							</div>
							<div class="p-review">
								<span class="number J-p-comm-ss-100005945610">2200+</span>人评价
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!--页面底部-->
	<div class="clearfix footer">
		<div class="py-container">
			<div class="footlink">
				<div class="Mod-service">
					<div class="mod_service" clstag="h|keycount|btm|btmnavi_null01">
						<div class="grid_c1 mod_service_inner">
							<ul class="mod_service_list">
								<li class="mod_service_item">
									<div class="mod_service_unit">
										<h5 class="mod_service_tit mod_service_duo">多</h5>
										<p class="mod_service_txt">品类齐全，轻松购物</p>
									</div></li>
								<li class="mod_service_item">
									<div class="mod_service_unit">
										<h5 class="mod_service_tit mod_service_kuai">快</h5>
										<p class="mod_service_txt">多仓直发，极速配送</p>
									</div></li>
								<li class="mod_service_item">
									<div class="mod_service_unit">
										<h5 class="mod_service_tit mod_service_hao">好</h5>
										<p class="mod_service_txt">正品行货，精致服务</p>
									</div></li>
								<li class="mod_service_item">
									<div class="mod_service_unit">
										<h5 class="mod_service_tit mod_service_sheng">省</h5>
										<p class="mod_service_txt">天天低价，畅选无忧</p>
									</div></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="clearfix Mod-list">
					<div class="yui3-g">
						<div class="yui3-u-1-6">
							<h5 style="font-size: 15px;">购物指南</h5>
							<ul class="unstyled">
								<li>购物流程</li>
								<li>会员介绍</li>
								<li>生活旅行/团购</li>
								<li>常见问题</li>
								<li>购物指南</li>
							</ul>
						</div>
						<div class="yui3-u-1-6">
							<h5 style="font-size: 15px;">配送方式</h5>
							<ul class="unstyled">
								<li>上门自提</li>
								<li>211限时达</li>
								<li>配送服务查询</li>
								<li>配送费收取标准</li>
								<li>海外配送</li>
							</ul>
						</div>
						<div class="yui3-u-1-6">
							<h5 style="font-size: 15px;">支付方式</h5>
							<ul class="unstyled">
								<li>货到付款</li>
								<li>在线支付</li>
								<li>分期付款</li>
								<li>邮局汇款</li>
								<li>公司转账</li>
							</ul>
						</div>
						<div class="yui3-u-1-6">
							<h5 style="font-size: 15px;">售后服务</h5>
							<ul class="unstyled">
								<li>售后政策</li>
								<li>价格保护</li>
								<li>退款说明</li>
								<li>返修/退换货</li>
								<li>取消订单</li>
							</ul>
						</div>
						<div class="yui3-u-1-6">
							<h5 style="font-size: 15px;">特色服务</h5>
							<ul class="unstyled">
								<li>夺宝岛</li>
								<li>DIY装机</li>
								<li>延保服务</li>
							</ul>
						</div>
						<div class="yui3-u-1-6">
							<div class="mod_help_cover">
								<h5 class="mod_help_cover_tit">自营覆盖区县</h5>
								<div class="mod_help_cover_con">
									<p class="mod_help_cover_info">已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
									<p class="mod_help_cover_more">
										<a href="//help.jd.com/user/issue/103-983.html" target="_blank">查看详情
										</a>
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="Mod-copyright">
					<ul class="helpLink">
						<li>关于我们<span class="space"></span></li>
						<li>联系我们<span class="space"></span></li>
						<li>联系客服<span class="space"></span></li>
						<li>合作招商<span class="space"></span></li>
						<li>商家帮助<span class="space"></span></li>
						<li>营销中心<span class="space"></span></li>
						<li>友情链接<span class="space"></span></li>
						<li>销售联盟<span class="space"></span></li>
						<li>友情链接<span class="space"></span></li>
						<li>隐私政策</li>
					</ul>
					<p>京公网安备 1****002000088号|京ICP证0*****9号|互联网药品信息服务资格证编号(京)-经营性-2014-0008|新出发京零 字第大1*****2号</p>
					<p>京ICP备0*****1号京公网安备1***********2</p>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script src="plugins/vue/vuejs-2.5.16.js"></script>
<script src="plugins/vue/qs.js"></script>
<script src="plugins/vue/axios-0.18.0.js"></script>
<script src="api/network.js"></script>
<script src="api/search.js"></script>
<script src="js/search/searchManager.js"></script>
</html>